/* eslint-disable no-unused-vars */
/* eslint-disable class-methods-use-this */
/* eslint-disable import/no-cycle */
import React from 'react';
import { Tabs, Form, Select, Space, Input } from 'antd';
import BaseControl from './BaseControl';
import ReactLiveCode from '../reactcode/ReactLiveCode';

const { TabPane } = Tabs;
const { Option } = Select;
class LiveCodeControl extends BaseControl {
  static create(props, dataProps, extProps) {
    return new LiveCodeControl(props, dataProps, extProps);
  }

  constructor(props, dataProps, extProps) {
    const dataProps2 = {
      title: '编码器',
      type: 'LiveCode',
      code: '<></>',
      widthPercent: 30,
      // height: 30,
      ...dataProps,
    };
    super(props, dataProps2, extProps);
    this.newKey();
    this.name = '编码器';
    this.value = this.data.code;
    // this.icon = '';
  }

  newKey() {
    this.tempKey = `livecode${new Date()}${Math.random().toString(36)}`; // 解决code无法生效，需要重新生成一个组件的bug。
  }

  hook = `()=>{
    const context=useContext(DesignContext);
    //console.log(context);
    return <><strong>hook模板</strong></>;
  }`;

  function2 = `()=>{
    const context=useContext(DesignContext);
    //console.log(context);
    return <><strong>函数模板</strong></>;
  }`;

  component = `class Example extends React.Component {
    render() {
      return (<DesignContext.Consumer>
        {(context) => {
          //console.log(context);
          return <><strong>组件模板</strong></>;
        }}
      </DesignContext.Consumer>)
    }
  }`;

  getPropertyTabs(parentForm) {
    return [
      ...super.getPropertyTabs(parentForm),
      <TabPane tab="控件配置" key="3">
        <Form.Item label="代码模板">
          <Space size={5}>
            <Select
              placeholder="选择代码模板"
              style={{ width: 120 }}
              onChange={(value) => {
                if (value === 'hook') {
                  this.data.code = this.hook;
                }
                if (value === 'function') {
                  this.data.code = this.function2;
                }
                if (value === 'component') {
                  this.data.code = this.component;
                }
                this.newKey();
                parentForm.refreash();
              }}
            >
              <Option value="hook">hook模板</Option>
              <Option value="function">函数模板</Option>
              <Option value="component">组件模板</Option>
            </Select>
            {/* <Select
              placeholder="添加组件模板"
              style={{ width: 120 }}
              onChange={(value) => {
                // const c = ControlPlus.create(value);
                const code3 = `{type:"${value}",title:"${value}"}`; // JSON.stringify(c.data);
                const template = `<DesignControl designkey="${value}" designdata={${code3}} />`;
                this.data.code = template;
                this.newKey();
                parentForm.refreash();
              }}
            >
              <Option value="text">文本框</Option>
              <Option value="select">下拉框</Option>
            </Select> */}
          </Space>
        </Form.Item>
        <Form.Item label="编码区域">
          <ReactLiveCode
            key={this.tempKey}
            mode="edit"
            code={this.data.code}
            scope={parentForm.packages}
            onChange={(event) => {
              if (event !== this.data.code) {
                this.data.code = event;
                parentForm.refreash();
              }
              return event;
            }}
          />
        </Form.Item>
      </TabPane>,
    ];
  }

  getDesignControl(parentForm) {
    return <ReactLiveCode mode="preview" code={this.data.code} scope={parentForm.packages} {...this.extProps} />;
  }
}

export default LiveCodeControl;
